<template>
	<om-page :title="pageTitle">
		<om-topbutton @click='searchTab' style="width: 100%;"></om-topbutton>
		<view class="page__bd" style="padding-top:84rpx;">
			<uni-list>
				<view v-for="(item, index) in commonData.datas" :key="index">
					<uni-list-item
						:showArrow="false"
						:avatar="index + 1"
						:avatarBgColor="getAvatarBgColor(index)"
						:title="item.userName"
						:note="item.instName ? item.instName : ''"
					>
						<view slot="footer">
							<view v-if="item.unAttendTimes">
								<view class="footer-cls">未考勤次数:{{ item.unAttendTimes }}</view>
							</view>
							<view v-if="item.lateTimes">
								<view class="footer-cls">迟到次数:{{ item.lateTimes }}</view>
							</view>
							<view v-if="item.earlyTimes">
								<view class="footer-cls">早退次数:{{ item.earlyTimes }}</view>
							</view>
						</view>
					</uni-list-item>
				</view>
			</uni-list>
		</view>
		<tui-loadmore :visible="commonData.loadding"></tui-loadmore>
		<tui-nomore :visible="!commonData.pullUpOn"></tui-nomore>
		<tui-scroll-top :scrollTop="scrollTop" style="background: rgba(124, 174, 255, 0.5)"></tui-scroll-top>
	</om-page>
</template>

<script>
import listLoad from '../../../static/js/listLoad.js';
const app = getApp();
export default {
	data() {
		return {
			scrollTop: 0,
			commonData: {
				query:{
					
				}
			},
			pageTitle:""
		};
	},
	methods: {
		searchTab() {
			uni.navigateTo({
				url: 'search?date=' + this.commonData.query.dateStr
			});
		},
		getAvatarBgColor(index){
			if(index < 3){
				return this.ColorList[index].name
			}
			if(index < 10){
				return this.ColorList[3].name
			}
			return this.ColorList[4].name
		}
	},
	onLoad(options) {
		let _that = this;
		let date = options.date;
		if (!date) {
			_that.om.toast('没有找到日期参数！');
			return;
		}
		this.pageTitle = date
		uni.setNavigationBarTitle({
			title: this.pageTitle
		});
		_that.commonData.query.dateStr = date
		listLoad.initData(_that, 'wxAttend/getAttendExOrderList');
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	//页面相关事件处理函数--监听用户下拉动作
	onPullDownRefresh: function() {
		listLoad.pullDownRefresh(this);
	},

	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		listLoad.reachBottom(this);
	}
};
</script>

<style>
.om_hd_search {
	width: 98%;
}
.footer-cls {
	font-size: 30rpx;
}
</style>
